<template>
	<view class="container">

		<!-- 状态选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
				@click="switchTab(index)">
				<text>{{ tab }}</text>
				<view class="tab-line" v-if="currentTab === index"></view>
			</view>
		</view>

		<!-- 预约列表 -->
		<scroll-view scroll-y class="appointment-list" v-if="filteredAppointments.length > 0">
			<view class="appointment-item" v-for="(item, index) in filteredAppointments" :key="index">
				<!-- 医生信息 -->
				<view class="doctor-info">
					<image class="doctor-avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="doctor-detail">
						<text class="doctor-name">{{ item.name }}</text>
						<text class="doctor-title">{{ item.department }} | {{ item.position }}</text>

					</view>
				</view>

				<!-- 预约信息 -->
				<view class="appointment-info">
					<view class="info-row">
						<text class="info-label">预约时间：</text>
						<text class="info-value">{{ item.reservation }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">预约号：</text>
						<text class="info-value">{{ item.number }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">就诊人：</text>
						<text class="info-value">{{ item.patient }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">费用：</text>
						<text class="info-value price">¥{{ item.cost }}</text>
					</view>
				</view>

				<!-- 状态和操作 -->
				<view class="appointment-status">
					<text class="status-tag" :class="getStatusClass(item.state)">{{ item.state }}</text>
					<view class="operation-btns">
						<button class="op-btn cancel-btn" v-if="item.state === '待就诊'"
							@click="cancelAppointment(item)">取消预约</button>
						<button class="op-btn primary-btn" v-if="item.state === '待就诊'"
							@click="viewGuide(item)">就诊指南</button>
						<button class="op-btn primary-btn" v-if="item.state === '已完成'"
							@click="addReview(item)">评价</button>
						<button class="op-btn secondary-btn" v-if="item.state === '已完成'"
							@click="viewMedicalRecord(item)">查看病历</button>
						<button class="op-btn secondary-btn" @click="makeAgain(item)">再次预约</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image src="/static/empty-appointment.png" class="empty-image"></image>
			<text class="empty-text">暂无{{ tabs[currentTab] }}预约</text>
			<button class="make-appointment-btn" @click="makeNewAppointment">立即预约</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选项卡数据
				tabs: ['全部', '待就诊', '已完成', '已取消'],
				currentTab: 0,
				globaApi: '',
				// 预约数据
				appointments: []
				// {
				// 		id: 1,
				// 		doctorName: '李医生',
				// 		doctorAvatar: '/static/doctor1.png',
				// 		department: '内科',
				// 		title: '主任医师',
				// 		hospitalName: '仁爱医院',
				// 		appointmentDate: '2025-03-20',
				// 		appointmentTime: '09:30-10:00',
				// 		appointmentNumber: 'A0023',
				// 		patientName: '张三',
				// 		price: '60.00',
				// 		status: '待就诊'
				// 	},
				// 	{
				// 		id: 2,
				// 		doctorName: '王医生',
				// 		doctorAvatar: '/static/doctor2.png',
				// 		department: '外科',
				// 		title: '副主任医师',
				// 		hospitalName: '和平医院',
				// 		appointmentDate: '2025-03-15',
				// 		appointmentTime: '14:00-14:30',
				// 		appointmentNumber: 'B0045',
				// 		patientName: '张三',
				// 		price: '80.00',
				// 		status: '已完成'
				// 	},
				// 	{
				// 		id: 3,
				// 		doctorName: '赵医生',
				// 		doctorAvatar: '/static/doctor3.png',
				// 		department: '皮肤科',
				// 		title: '主治医师',
				// 		hospitalName: '仁爱医院',
				// 		appointmentDate: '2025-03-10',
				// 		appointmentTime: '11:00-11:30',
				// 		appointmentNumber: 'C0067',
				// 		patientName: '李四',
				// 		price: '50.00',
				// 		status: '已取消'
				// 	},
				// 	{
				// 		id: 4,
				// 		doctorName: '筑医生',
				// 		doctorAvatar: '/static/doctor3.png',
				// 		department: '皮肤科',
				// 		title: '主治医师',
				// 		hospitalName: '博爱医院',
				// 		appointmentDate: '2025-03-10',
				// 		appointmentTime: '11:00-11:30',
				// 		appointmentNumber: 'C0067',
				// 		patientName: '李四',
				// 		price: '50.00',
				// 		status: '已取消'
				// 	}	
			}
		},
		computed: {
			// 过滤后的预约列表
			filteredAppointments() {
				return this.appointments.filter(item => {
					return this.currentTab === 0 || item.state === this.tabs[this.currentTab];
				});
			}
		},
		onLoad() {
			this.globaApi = getApp().globalData.baseUrl
			console.log(this.globaApi)
			this.getYuyue()
		},
		methods: {
			async getYuyue() {
				uni.request({
					url: `${this.globaApi}/reservation/getReservationByUserId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.appointments = res.data.data
							console.log('返回的数据:', this.appointments) // 打印完整的返回数据
							console.log('数据类型:', typeof res.data.data) // 检查数据类型
						} else {
							uni.showToast({
								title: res.data.message || '预约失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})
			},
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
			},
			// 获取状态样式
			getStatusClass(state) {
				switch (state) {
					case '待就诊':
						return 'status-pending';
					case '已完成':
						return 'status-completed';
					case '已取消':
						return 'status-canceled';
					default:
						return '';
				}
			},
			// 取消预约
			cancelAppointment(item) {
				console.log('取消预约:', item.id);
				uni.showModal({
					title: '取消预约',
					content: '确定要取消此次预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 更新预约状态
							const index = this.appointments.findIndex(app => app.id === item.id);
							if (index !== -1) {
								this.appointments[index].state = '已取消';
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								});
							}
						}
					}
				});
			},
			// 查看就诊指南
			viewGuide(item) {
				console.log('查看就诊指南:', item.id);
				uni.navigateTo({
					url: `/pages/appointment/guide?id=${item.id}`
				});
			},
			// 添加评价
			addReview(item) {
				console.log('添加评价:', item.id);
				uni.navigateTo({
					url: `/pages/appointment/review?id=${item.id}`
				});
			},
			// 查看病历
			viewMedicalRecord(item) {
				console.log('查看病历:', item.id);
				uni.navigateTo({
					url: `/pages/appointment/record?id=${item.id}`
				});
			},
			// 再次预约
			makeAgain(item) {
				console.log('再次预约:', item.id);
				uni.navigateTo({
					url: `/pages/appointment/make?doctorId=${item.id}`
				});
			},
			// 新建预约
			makeNewAppointment() {
				console.log('新建预约');
				uni.navigateTo({
					url: '/pages/appointment/departments'
				});
			}
		}
	}
</script>

<style>
	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		height: 150vh;
		background-color: #f5f5f5;
	}

	/* 标题栏样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.placeholder {
		width: 60rpx;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		height: 80rpx;
		/* 固定高度 */
		min-height: 80rpx;
		/* 最小高度，防止高度变小 */
		width: 100%;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		top: 0;
		z-index: 1;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab-item text {
		font-size: 28rpx;
		color: #666666;
	}

	.tab-item.active text {
		color: #2979ff;
		font-weight: bold;
	}

	.tab-line {
		position: absolute;
		bottom: 0;
		width: 60rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	/* 预约列表样式 */
	.appointment-list {
		flex: 1;
		height: 100%;
		margin-bottom: 200rpx;
	}

	.appointment-item {
		margin: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 医生信息样式 */
	.doctor-info {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.doctor-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.doctor-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.doctor-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.doctor-title {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 8rpx;
	}

	.hospital-name {
		font-size: 26rpx;
		color: #999999;
	}

	/* 预约信息样式 */
	.appointment-info {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-row {
		display: flex;
		margin-bottom: 10rpx;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.info-label {
		width: 150rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.info-value {
		flex: 1;
		font-size: 26rpx;
		color: #333333;
	}

	.price {
		color: #ff5a5f;
		font-weight: bold;
	}

	/* 状态和操作样式 */
	.appointment-status {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
	}

	.status-tag {
		align-self: flex-end;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}

	.status-pending {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-completed {
		background-color: #f6ffed;
		color: #52c41a;
	}

	.status-canceled {
		background-color: #f5f5f5;
		color: #999999;
	}

	.operation-btns {
		display: flex;
		justify-content: flex-end;
	}

	.op-btn {
		margin-left: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
	}

	.cancel-btn {
		background-color: #ffffff;
		color: #666666;
		border: 1rpx solid #d9d9d9;
	}

	.primary-btn {
		background-color: #2979ff;
		color: #ffffff;
	}

	.secondary-btn {
		background-color: #ffffff;
		color: #2979ff;
		border: 1rpx solid #2979ff;
	}

	/* 空状态样式 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}

	.make-appointment-btn {
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		background-color: #2979ff;
		border-radius: 35rpx;
	}
</style>